<template>
  <VDialog
    @close="handleClose"
    disabled
    :loading="loading"
    title="系统登录记录"
    destroy-on-close
    width="60%"
  >
    <template #content>
      <div class="flex items-center my-[10px] gap-[10px]">
        <VCascader
          v-model="form.user_id"
          :multiple="false"
          style="width: 200px"
          placeholder="登录用户"
          :clearable="false"
        />
        <div>
          <el-date-picker
            v-model="form.login_time"
            type="datetimerange"
            range-separator="至"
            start-placeholder="登录开始时间"
            end-placeholder="登录结束时间"
            style="width: 360px"
            value-format="YYYY-MM-DD HH:mm:ss"
            :default-time="defaultTime"
          />
        </div>
        <el-input
          v-model.trim="form.login_ip"
          placeholder="登录IP"
          style="width: 160px"
        ></el-input>
        <div class="ml-auto">
          <el-button type="primary" @click="query">查询</el-button>
          <el-button @click="reset">重置</el-button>
        </div>
      </div>
      <vxe-grid ref="tableRef" v-bind="tableOptins"></vxe-grid>
    </template>
  </VDialog>
</template>

<script setup>
import api from "../../api/index";
import { defaultTime } from "../../data";
import { getOneMonthTimeRange } from "@/utils/time.js";
const emit = defineEmits(["update:modelValue", "close", "refresh"]);
const props = defineProps({
  id: { type: [Number, String], default: null },
});
const initForm = (user_id = null) => ({
  user_id,
  login_time: getOneMonthTimeRange(),
  login_ip: "",
});

const form = ref(initForm());
watch(
  () => props.id,
  (val) => {
    if (!val) return;
    nextTick(() => {
      form.value = initForm(val);
      query();
    });
  }
);

const loading = ref(false);
const tableRef = ref();

const query = () => {
  tableRef.value.commitProxy("query");
};
const reset = () => {
  form.value = {
    user_id: props.id || null,
    login_time: getOneMonthTimeRange(),
    login_ip: "",
  };
  tableRef.value?.commitProxy("reload", { page: { currentPage: 1 } });
};
const tableOptins = reactive({
  height: 650,
  pagerConfig: { pageSize: 20 },
  columns: [
    // { type: "seq", width: 50 },
    { field: "id", title: "序号", width: 80 },
    { field: "user_id_text", title: "用户", minWidth: "170" },
    { field: "login_time", title: "登录时间", minWidth: "170" },
    { field: "login_type_text", title: "登录方式", minWidth: "170" },
    { field: "login_ip", title: "登录IP", minWidth: "170" },
    { field: "device_os", title: "设备系统", minWidth: "170" },
    { field: "device_bs", title: "登录浏览器", minWidth: "170" },
  ],
  proxyConfig: {
    autoLoad: false, // 是否自动加载查询数据
    props: {
      result: "data",
      total: "total",
    },
    ajax: {
      query: ({ page }) => {
        const payload = {
          ...initForm(props.id),
          ...form.value,
          ...page,
        };
        return api.loginRecord(payload);
      },
    },
  },
});

const handleClose = async (refresh) => {
  emit("update:modelValue", false);
  emit("close");
  if (refresh) emit("refresh");
};
</script>
